<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'考勤统计',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<view class="nostrongtext shenpi" @click="shaixuanshow = true">筛选</view>
				</view>
			</view>
		</header-top>
		<u-popup :show="popshow" round="20" @close="close">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">设置考勤状态</view>
				</view>
				<view class="inputbox flexbetween">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">考勤状态</view>
					</view>
					<view class="itembox flexbetween" @click="kqShow=true">
						<input type="text" class="inputstyle" placeholder="请选择" disabled="true" v-model="kqtext">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="inputbox">
					<view class="strongtext">备注：</view>
					<textarea class="textarea mainpadding radius" placeholder="请输入备注(50字以内)" maxlength="50"
						v-model="setmsg.note"></textarea>
				</view>
				<view class="surbtns flexcenter" style="margin-top: 60rpx;" @click="setstatusSure()">确认</view>
			</view>
		</u-popup>
		<view class="flexaround  tabs mainpadding">
			<view :class="currents==1?'focustext':'nofocustext'" @click="selectab(1)">按日统计</view>
			<view class="fenge"></view>
			<view :class="currents==2?'focustext':'nofocustext'" @click="selectab(2)">按月统计</view>
		</view>
		<view class="tianshu" v-show="currents==1">
			<view class="chuqinbox ffffff mainpadding flexbetween">
				<view class="box1">
					<view class="renshu">{{allMsg.zc_num}}
						<text class="rentext">人</text>
					</view>
					<view class="chuqin">正常出勤</view>
				</view>
				<view class="box1">
					<view class="renshu" style="color: #FF0000 ;">{{allMsg.qq_num}}
						<text class="rentext">人</text>
					</view>
					<view class="chuqin">缺勤</view>
				</view>
				<view class="box1">
					<view class="renshu" style="color: #FF0000 ;">{{allMsg.ycqq_num}}
						<text class="rentext">人</text>
					</view>
					<view class="chuqin">异常出勤</view>
				</view>
				<view class="box1">
					<view class="renshu">{{allMsg.qj_num}}
						<text class="rentext">人</text>
						<view class="chuqin">请假</view>
					</view>
				</view>
				<view class="box1">
					<view class="renshu">{{allMsg.xx_num}}
						<text class="rentext">人</text>
						<view class="chuqin">休息</view>
					</view>
				</view>
			</view>
			<view class="strongtext  mainpadding">
				<text class="titletext textliner">考勤详情</text>
			</view>
			<view class="paddingbom">
				<view class="mainpadding ffffff flexbetween xiangqingbox" v-for="item in list" :key="item.id"
					@click="kaoqinxq(item)">
					<view class="left flexleft">
						<view class="renyuan">
							<view class="mingzi">{{item.staff.username}}</view>
						</view>
						<view class="line"></view>
						<view class="qiandaotime">
							<view class="qiandao" style="margin-bottom: 16rpx;">
								签到：{{item.start_kqrecord?item.start_kqrecord.signtime_text : "暂无打卡"}}</view>
							<view class="qiandao">签退：{{item.end_kqrecord?item.end_kqrecord.signtime_text : "暂无打卡"}}
							</view>
						</view>
					</view>
					<view class="right flexleft">
						<view class="xiangqing">
							<template v-if="item.type==2">
								<view class="zhengchang">休息</view>
							</template >
							<template v-else>
								<view class="zhengchang" v-show="item.status==0">打卡中</view>
								<view class="tuokang" v-show="item.status==10">缺勤</view>
								<view class="tuokang" v-show="item.status==20">{{item.type==3?"加班":""}}脱岗</view>
								<view class="zhengchang" v-show="item.status==30">{{item.type==3?"加班":""}}正常</view>
								<view class="tuokang" v-show="item.status==40">{{item.type==3?"加班":""}}迟到脱岗</view>
								<view class="tuokang" v-show="item.status==50">{{item.type==3?"加班":""}}迟到</view>
								<view class="tuokang" v-show="item.status==60">{{item.type==3?"加班":""}}旷工脱岗</view>
								<view class="tuokang" v-show="item.status==70">{{item.type==3?"加班":""}}旷工</view>
							</template>
							
							<!-- <view class="zhengchang" v-show="item.checkin.status==1"
								@click.stop="setstatus(item.info.staff_id,1)">正常</view>
							<view class="zhengchang" v-show="item.checkout.status==2"
								@click.stop="setstatus(item.info.staff_id,2)">待确定</view> -->
						</view>
						<view class="righticon2"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="yuefen" v-show="currents==2">
			<view class="flexbetween mainpadding">
				<view class="dingbuwb flex1">应出勤</view>
				<view class="dingbuwb flex1">实际出勤</view>
				<view class="dingbuwb flex1">正常出勤</view>
				<view class="dingbuwb flex1">异常出勤</view>
			</view>
			<view class="flexbetween yuefens mainpadding ffffff ">
				<view class="attendance flex1">{{allMsg2.total_ycq_days}}</view>
				<view class="attendance flex1">{{allMsg2.total_sjcq_days}}</view>
				<view class="attendance flex1">{{allMsg2.total_zccq_days}}</view>
				<view class="attendance flex1">{{allMsg2.total_yccq_days}}</view>
			</view>
			<view class="paddingbom">
				<view class="mainpadding_top ffffff" v-for="(item,index) in list2" :key="index"
					@click="jumpdetailmonth(item.id)">
					<view class="nametext">{{item.username}}</view>
					<view class="flexleft flex_wrap ">
						<view class="flex1 huisetext margin_top1">应出勤：
							<text class="strongtext2">{{item.ycq_days}}</text>
						</view>
						<view class="flex1 huisetext margin_top1">实际出勤：
							<text class="strongtext2">{{item.sjcq_days}}</text>
						</view>
						<view class="flex1 huisetext margin_top1">正常出勤：
							<text class="strongtext2">{{item.zccq_days}}</text>
						</view>
						<view class="flex1 huisetext margin_top1">异常出勤：
							<text class="strongtext2">{{item.yccq_days}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottombox ffffff mainpaddin flexbetween">
			<template v-if="currents==1">
				<view class="bottmo-box1 flexleft " @click="upday()">
					<view class="iconbox1 ">
						<image src="../../../static/image/system/youjiantou.png" mode=""></image>
					</view>
					<view class="wenben">前一天</view>
				</view>
				<view class="bottom-line "></view>
				<view class="bottmo-box2 flexleft ">
					<view class="iconbox" >
						<image src="../../../static/image/system/rili.png" mode=""></image>
					</view>
					<view class="wenben">{{timeday}}</view>
				</view>
				<view class="bottom-line "></view>
				<view class="bottmo-box2 flexleft " @click="downday()">
					<view class="wenben margin_right1">后一天</view>
					<view class="iconbox1">
						<image src="../../../static/image/system/zuojiantou.png" mode=""></image>
					</view>
				</view>
			</template>
			<template v-if="currents==2">
				<view class="bottmo-box1 flexleft" @click="upmonth()">
					<view class="iconbox1">
						<image src="../../../static/image/system/youjiantou.png" mode=""></image>
					</view>
					<view class="wenben">上一月</view>
				</view>
				<view class="bottom-line "></view>
				<view class="bottmo-box2 flexleft ">
					<view class="iconbox" style="margin-bottom: 10rpx;">
						<image src="../../../static/image/system/rili.png" mode=""></image>
					</view>
					<view class="wenben">{{timemonth}}</view>
				</view>
				<view class="bottom-line "></view>
				<view class="bottmo-box2 flexleft" @click="downmonth()">
					<view class="wenben margin_right1">下一月</view>
					<view class="iconbox1">
						<image src="../../../static/image/system/zuojiantou.png" mode=""></image>
					</view>
				</view>
			</template>
		</view>
		<u-popup :show="shaixuanshow" round="20" @close="close">
			<view class=" mainpadding2 ffffff margin_top">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="inputbox flexbetween">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">选择考勤组</view>
					</view>
					<view class="itembox flexbetween" @click="ckBuMenShow=true">
						<input type="text" class="inputstyle" placeholder="请选择" disabled="true" v-model="ckBuMenText">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="inputbox flexbetween">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">选择员工</view>
					</view>
					<view class="itembox flexbetween" @click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
						<input type="text" class="inputstyle" placeholder="请选择" disabled="true" v-model="staff_name">
						<view class="righticon2"></view>
					</view>
				</view>
			</view>
			<view class="ffffff mainpadding2">
				<view class="strongtext">选择考勤结果</view>
				<view class="flexleft">
					<view class="kaoqinanniu flexcenter margin_top" v-for="(item,index) in kqjglist[0]" :key="item.id"
						@click="kqjg(item.id)">
						<view :class="item.id == current?'select margin_box':'noselect margin_box'">
							<text class="shenptext">{{item.name}}</text>
							<view class="selectimage"></view>
						</view>
					</view>
				</view>
				<view class="flexbetween ">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="surepop">确认</view>
				</view>
			</view>
		</u-popup>
		<selectCKBuMen :message="{ckBuMenShow:ckBuMenShow}" @ckBuMenSure="ckBuMenSure"></selectCKBuMen><!-- 员工部门 -->
	</view>

</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				kqtext:"",
				shaixuanshow: false,
				// :10=缺勤,20=脱岗,30=正常,40=迟到脱岗,50=迟到,60=旷工脱岗,70=旷工,80=休息,90=加班
				kqjglist: [
					[{
							id: 10,
							name: '缺勤'
						},
						{
							id: 20,
							name: '脱岗'
						},
						{
							id: 30,
							name: '正常'
						},
						{
							id: 40,
							name: '迟到脱岗'
						},
						{
							id: 50,
							name: '迟到'
						},
						{
							id: 60,
							name: '旷工脱岗'
						},
						{
							id: 70,
							name: '旷工'
						},
						{
							id: 80,
							name: '休息'
						},
						{
							id: 90,
							name: '加班'
						}
					]
				],
				current: '',
				currents: 1,
				
				// 日
				days: 0,
				timeday: "",
				// 月
				timemonth: "",
				month: 0,
				setmsg: {
					staff_id: "",
					type: "", //类型：1=签到，2=签退
					status: "", //状态:1=正常,2=待确定,3=迟到,4=早退,5=脱岗,6=缺勤,7=休息,8=请假,9=加班
					note: '', //备注
				},
				// pop弹出层
				popshow: false,
				pageShow:false,
				// 员工
				staff_id:"",
				staff_name:"",
				// 员工部门
				ckBuMenShow: false,
				ckBuMenText: "",
				staff_bm_id: "", //员工部门id
				allMsg: {},
				list:[],
				allMsg2: {},
				list2:[],
			}
		},
		onLoad() {
			this.reset()
		},
		onShow() {
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				this.staff_id = data.id
				this.staff_name = data.name
				return false
			})
		},
		watch: {
			timemonth() {
				this.getmonthinit()
			},
			timeday() {
				this.getdayinit()
			}
		},

		methods: {
			selectRole(url,val) {
				if(val==1 && this.bfFlag){
					httpRequest.toast("当前数据为拜访数据，不可选择客户！")
					return false
				}
				uni.navigateTo({
					url
				})
			},
			ckBuMenSure(e) { //员工部门
				if (e) {
					this.ckBuMenText = e.value[0].name
					this.staff_bm_id = e.value[0].id
				}
				this.ckBuMenShow = false
			},
			// 初始化获取考勤(日)列表
			getdayinit() {
				httpRequest.request('/dhtapi/user/kqtjAr', 'POST', {
					search_time: this.timeday, //日期
					staff_bm_id: this.staff_bm_id, //考勤组id
					staff_id: this.staff_id, //员工id
					status: this.current, //状态:1=正常,2=待确定,3=迟到,4=早退,5=脱岗,6=缺勤,7=休息,8=请假,9=加班
				}).then(res => {
					this.allMsg = res.data
					this.list = res.data.kq
					this.pageShow = true
				})
			},
			// 考勤表（月)
			getmonthinit() {
				httpRequest.request('/dhtapi/user/kqtjAy', 'POST', {
					search_time: this.timemonth, //日期
					staff_bm_id: this.staff_bm_id, //考勤组id
					staff_id: this.staff_id, //员工id
				}).then(res => {
					this.list2 = res.data.staff
					this.allMsg2 = res.data
					
				})
			},
			// 上一天
			upday() {
				this.days = Number(this.days) + 1
				// console.log(httpRequest.getMonthDay(2, -1), "上一月和下一天")
				let date = httpRequest.getMonthDay("", this.days)
				// 如果当前时间与返回回来的时间重合返回上一状态
				if (this.timeday == date) {
					this.days = Number(this.month) - 1
					return false
				} else {
					this.timeday = date
				}
			},
			// 下一天
			downday() {
				if (this.days <= 0) {
					return false
				}
				this.days = Number(this.days) - 1
				if (this.days == 0) {
					this.reset()
					return false
				}
				// console.log(httpRequest.getMonthDay(2, -1), "上一月和下一天")
				this.timeday = httpRequest.getMonthDay("", this.days)
			},
			
			// 上一月
			upmonth() {
				this.month = Number(this.month) + 1
				// console.log(httpRequest.getMonthDay(2, -1), "上一月和下一天")
				let date = httpRequest.getMonthDay(this.month, "")
				// 如果当前时间与返回回来的时间重合返回上一状态
				if (this.timemonth == date) {
					this.month = Number(this.month) - 1
					return false
				} else {
					this.timemonth = date
				}
			},
			// 下一月
			downmonth() {
				if (this.month <= 0) {
					return false
				}
				this.month = Number(this.month) - 1
				if (this.month == 0) {
					this.reset()
					return false
				}
				// console.log(httpRequest.getMonthDay(2, -1), "上一月和下一天")
				this.timemonth = httpRequest.getMonthDay(this.month, "")
			},
			reset() {
				let timemonth = httpRequest.dateTimeStr('y-m'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
				this.timemonth = timemonth
				let timeday = httpRequest.dateTimeStr('y-m-d');
				this.timeday = timeday
			},
			
			// 考勤详情
			kaoqinxq(item) {
				if (item.start_kqrecord && item.start_kqrecord.signtime_text) {
					uni.navigateTo({
						url: "/pages/workbench/xiaoshou/dakamx?id=" + item.id
					})
				} else {
					httpRequest.toast('无打卡记录，无法进入')
					return false
				}
			},
			jumpdetailmonth(id) {
				uni.navigateTo({
					url: "/pages/workbench/xiaoshou/wodekq?id=" + id
				})
			},
			// 重置
			resetbtn() {
				this.current = ''
				this.staff_bm_id = ""
				this.ckBuMenText = ""
				this.staff_id = ""
				this.staff_name = ""
				if (this.currents == 1) {
					this.getdayinit()
				} else {
					this.getmonthinit()
				}
			},
			surepop() {
				this.shaixuanshow = false
				if (this.currents == 1) {
					this.getdayinit()
				} else {
					this.getmonthinit()
				}
			},
			kqjg(id) {
				this.current = id;
			},
			selectab(index) {
				this.currents = index;
			},
			close() {
				this.shaixuanshow = false
				this.popshow = false
			},
			// 更改状态
			setstatus(id, value) {
				this.setmsg.staff_id = id
				this.setmsg.type = value
				this.popshow = true
			},
			setstatusSure() {
				if (this.setmsg.status == "") {
					httpRequest.toast("请选择修改状态")
					return false
				}
				console.log(this.setmsg.status, "当前状态")
				httpRequest.request('appapi/manage/attendance/clockoperate', 'POST', {
					staff_id: this.setmsg.staff_id,
					date: this.timeday,
					type: this.setmsg.type,
					status: this.setmsg.status,
					note: this.setmsg.note
				}).then(res => {
					this.popshow = false
					if (res.code == 1) {
						this.setmsg = {
							staff_id: "",
							type: "", //类型：1=签到，2=签退
							status: "", //状态:1=正常,2=待确定,3=迟到,4=早退,5=脱岗,6=缺勤,7=休息,8=请假,9=加班
							note: '', //备注
						}
						this.kqtext = ""
						this.getdayinit()
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.margin_right1{
		margin-right: 10rpx;
	}
	.surebtn {
		width: 45%;
	}

	.surbtns {
		background: linear-gradient(273deg, #0BBDCB 0%, #41D4E2 100%);
		border-radius: 50rpx;
		padding: 20rpx 0;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
	}

	.reset {
		background: #ebb563;
	}

	.kaoqinanniu {
		width: 33.33%;
	}

	.flexleft {
		flex-wrap: wrap;
	}

	/* 未选中状态 */
	.noselect {
		font-size: 24rpx;
		font-weight: 500;
		color: #000000;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
		width: 184rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 选中状态 */
	.select {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
		width: 184rpx;
		height: 64rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #0BBDCB;
	}

	.flex1 {
		flex: 3;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.inputstyle {
		font-size: 28rpx;
	}

	.inputbox {
		padding-top: 30rpx;

	}

	.strongtext {
		padding-bottom: 20rpx;
	}

	.nametext {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.quebtn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 68rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 672rpx;
		height: 82rpx;
		background: #00B855;
		border-radius: 41rpx;
	}

	.chongzhi {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		margin: 30rpx auto 0;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		width: 672rpx;
		height: 82rpx;
		background-color: #fff;
		border-radius: 41rpx;
	}

	.yuefens:nth-child(2n) {
		background: #FAFAFA;
	}

	.attendance {
		font-size: 28rpx;
		text-align: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.flex1 {
		flex: 2.5;
	}

	.dingbuwb {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.Employee {
		text-align: center;
	}

	.bottombox {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;

		box-sizing: border-box;
		padding: 30rpx 40rpx 70rpx;
	}

	.houtian {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		margin-right: 10rpx;
	}

	.wenben {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		margin-left: 10rpx;
	}

	.bottom-line {
		height: 44rpx;
		width: 2rpx;
		background-color: rgba(153, 153, 153, .1);
	}

	.iconbox1 {
		width: 28rpx;
		height: 28rpx;

		image {
			margin-bottom: 10rpx;
			width: 100%;
			height: 100%;
		}
	}

	.iconbox {
		margin-bottom: 4rpx;
		width: 28rpx;
		height: 28rpx;

		image {
			margin-bottom: 4rpx;
			width: 100%;
			height: 100%;
		}
	}

	.xiangqingbox:nth-child(2n) {
		background: #FAFAFA;
	}

	.xiangqing {
		margin-right: 36rpx;
	}

	.zhengchang {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.tuokang {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
		margin-top: 22rpx;
	}

	.qiandao {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.mingzi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		margin-bottom: 6rpx;
	}

	.yewuyuan {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.line {
		height: 42rpx;
		width: 2rpx;
		margin: 0 54rpx 0 32rpx;
		background-color: rgba(0, 0, 0, .1);
	}

	.chuqin {
		margin-top: 16rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.rentext {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.renshu {
		text-align: center;
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.focustext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.nofocustext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000;
	}

	.fenge {
		width: 1rpx;
		height: 28rpx;
		background-color: rgba(153, 153, 153, .3);
	}

	.paddingbom {
		padding-bottom: 150rpx;
	}

	.margin_top1 {
		margin-top: 20rpx;
	}

	.maincolor_text {
		font-size: 24rpx;
		color: #0BBDCB;
	}

	.huisetext {
		font-size: 28rpx;
		color: #666;
	}

	.strongtext2 {
		font-size: 28rpx;
		color: #000;
	}

	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}
</style>
